<template>
    <div id="add-project">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-table 
                :data="issueList" 
                class="w-h-100" 
                style="width: 100%" 
                border 
                v-loading="issueLoading" 
                element-loading-background="rgba(0, 0, 0, 0.5)"
                @selection-change="handleSelectionChange"
                v-model="selectedRows"
            >
                <el-table-column type="selection" width="55" />

                <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险事件"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_EventName}}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="160" :show-overflow-tooltip="true" label="辨析范围分类"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_Discriminate}}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="160" :show-overflow-tooltip="true" label="危害因素"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_HazardousFactors}}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施分类"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_DCMeasureClassName}}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="160" :show-overflow-tooltip="true" label="管控措施"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_DCMeasure}}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="160" :show-overflow-tooltip="true" label="隐患排查内容"  align="center" >
                    <template #default="scope">
                        <span>{{scope.row.v_CheckContent}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :disabled="repeatDis" :loading="repeatDis" @click="submitForm">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRefs , watch } from 'vue';
import { ElMessage, ElButton, ElDialog } from 'element-plus';
import { SMSDCListList , SMSIPPathContentBatchAddOrUpdate } from '/@/api/centerControl/sms';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    l_SMSDCListIds: any,
}
export default defineComponent( {
    name: 'add-project',
    components: {},
    props: {
        echoInfo: {
            type: String,
            default: ''
        },
        xjId: {
            type: Number,
            default: 0
        },
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: Number,
            default: 0
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const analyOption = ref();
        const issueList = ref();
        const issueLoading = ref(false);
        let multipleSelection: any = [];
        const selectedRows = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelProClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = async() => {
            let param: any = {};
            let setArr:any = [];
            if(multipleSelection.length === 0){
                ElMessage({
                    type: 'warning',
                    message: '请选择数据',
                });
                return;
            }else{
                multipleSelection.map((item: any) => {
                    setArr.push(item.id);
                });
                param.l_SMSDCListIds = setArr;
                param.l_IPPathId = props.xjId;
                param.L_AnalysisUnitId = props.repairInfo;
                state.repeatDis = true;
                try{
                    let res: any = await SMSIPPathContentBatchAddOrUpdate(param);
                    if(res.success){
                        state.repeatDis = false;
                        ctx.emit('controlProClick')
                    }else{
                        state.repeatDis = false;
                        ctx.emit('controlProClick')
                    }
                }catch(error){ state.repeatDis = false; }
            }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                issueLoading.value = true;
                state.repeatDis = false;
                titleCon.value = '新增巡检项目';
                getDataFun(props.repairInfo)
            }
        })

        /*** getDataFun 获取风险管控清单数据 */
        const getDataFun = async(id: Number) => {
            let res: any = await SMSDCListList({l_AnalysisUnitId: id});
            if(res.success) issueList.value = res.data;
            selectedRows.value = JSON.parse(props.echoInfo);
            issueLoading.value = false;
        }

        /*** analyChange 风险管控清单改变事件 */
        const analyChange = (val: any) => {
            if(val && val.length !== 0){
                let setArr: any = [];
                val.map((item: any) => {
                    setArr.push(item.id);
                });
                state.ruleForm.l_SMSDCListIds = setArr;
            }
        }

        /*** handleSelectionChange 批量更新的复选框 */
        const handleSelectionChange = (val: any) => {
            multipleSelection = val;
        }

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            analyChange,
            analyOption,
            issueList,
            issueLoading,
            handleSelectionChange,
            selectedRows,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: 50vh !important;
    // max-height: 50vh!important;
    overflow-y: auto!important;
}
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>